<template>
  <div>
    <div class="header">
      <div class="same">
        <div class="hed">
          <div class="i">
            <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
            <i class="iconfont icon-home" @click="$router.replace('/')"></i>
          </div>
          <p>账户设置</p>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="same">
        <div class="me_ziliao">
          <dl @click="$router.push('/UserInfo')">
            <dt>我的个人资料</dt>
            <dd><i class="el-icon-arrow-right"></i></dd>
          </dl>
          <router-link to="/Address">
          <dl>
            <dt>我的收货地址</dt>
            <dd><i class="el-icon-arrow-right"></i></dd>
          </dl>
          </router-link>
        </div>
        <div class="me_ziliao">
          <dl @click.self="drawer = true" type="primary">
            <dt>储值卡支付密码</dt>
            <dd><i class="el-icon-arrow-right"></i></dd>
            <el-drawer
            @click="drawer = false"
              title="储值卡支付密码"
              :visible.sync="drawer"
              :direction="direction"
              
              size="100vw"
            >
              <div class="mima">
                <div class="mm">
                  设置支付密码
                  <input type="text" placeholder="请输入六位数字支付密码" />
                </div>
                <div class="mm">
                  设置支付密码
                  <input type="text" placeholder="再次输入支付密码" />
                </div>
                <el-button class="btn">保存</el-button>
              </div>
            </el-drawer>
          </dl>
          <dl>
            <dt>手机号</dt>
            <dd>{{user.phone}}</dd>
          </dl>
        </div>
        <div class="me_ziliao">
          <dl>
            <dt>预存款支付免验证设置</dt>
            <dd><i class="el-icon-arrow-right"></i></dd>
          </dl>
          <dl @click.self="drawer1 = true" type="primary">
            <dt>我的协议管理</dt>
            <dd><i class="el-icon-arrow-right"></i></dd>
            <el-drawer
              :visible.sync="drawer1"
              :direction="direction"
           @click="drawer1=false"
              size="100vw"
            >
              没有协议
            </el-drawer>
          </dl>
        </div>
        <div class="me_ziliao">
          <dl>
            <dt>用户协议</dt>
            <dd><i class="el-icon-arrow-right"></i></dd>
          </dl>
          <dl>
            <dt>隐私政策</dt>
            <dd><i class="el-icon-arrow-right"></i></dd>
          </dl>
          <dl>
            <dt>帮助与反馈</dt>
            <dd><i class="el-icon-arrow-right"></i></dd>
          </dl>
        </div>
        <div class="me_ziliao">
          <p @click="$store.dispatch('eliminate','')">退出登录</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      drawer: false,
      drawer1: false,
      direction: "rtl",
    };
  },
    computed:{
user(){
  return this.$store.state.user
}
  },
  methods: {
    
  },
};
</script>
<style scoped lang="scss">
div {
  background: #f8f8f8;
}
.header {
  width: 100%;
  height: 8vh;
  //   background: red;

  .hed {
    width: 100%;
    height: 8vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    .i {
      display: flex;
      align-items: center;
      i {
        margin: 0 2vw;
      }
      .icon-home {
        font-size: 22px;
      }
    }
    p {
      width: 58vw;
    }
  }
}
.main {
  width: 100%;
  height: auto;
  .me_ziliao {
    width: 100%;
    height: auto;
    background: #fff;
    margin-bottom: 2vh;
    p {
      width: 100%;
      height: 8vh;
      line-height: 8vh;
      text-align: center;
      color: #eca624;
    }
    .mm {
      background: #f8f8f8;
      border-bottom: 1px solid #fff;
      width: 90vw;
      margin: 0 auto;
    }
    .mima input {
      border: none;
      background: #f8f8f8;
    }
    .btn {
      // margin-top: 3vh;
      width: 80vw;
      margin-left:12vw;
      border-radius: 15px;
      background: #eca624;
    }
  }
  .me_ziliao dl {
    display: flex;
    height: 8vh;
    line-height: 8vh;
    border-bottom: 1px solid #c8c8ca;
    justify-content: space-between;
  }
}
dt{
  color: #000;
}
</style>